<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    html,body{
        height: 100%;
        overflow: hidden;
    }
    #wrap{
        height: 100%;
    }
    #myVideo{
        display: block;
        margin: 0 auto;
    }
    footer{
        position: absolute;
        left: 0;
        bottom: 10px;
        height: 30px;
        width: 100%;
        background: black;
    }
    footer .play{
        margin-left: 10px;
        height: 100%;
        width: 50px;
        text-align: center;
        position: relative;
    }
    footer .play span{
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 10px;
    }
    footer .play .playPause{
        color: #fff;
        cursor: pointer;
        width: 16px;
        height: 16px;
        overflow: hidden;
        padding-bottom: 5px;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
    }
    footer .play .playPause1{
        position: absolute;
        width: 16px;
        height: 16px;
        top: 0;
        left: 0;
        display: none;
        cursor: pointer;
    }
    footer .play .stop{
        color: #fff;
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0;
    }
    footer .proOuter{
        width: 800px;
        height: 100%;
        position:absolute;
        left: 60px;
        top: 0;
        background: red;
    }
    footer .proOuter .proInner{
        width: 0;       
        height: 100%;
        background: greenyellow;
    }
    footer .time{
        width: 100px;
        height: 100%;
        position: absolute;
        left: 800px;
        top:0;
        background: pink;
    }
    footer .music{
        width: 150px;
        height: 100%;
        /* position: absolute; */
        /* left: 900px; */
        margin-left: 900px;
        /* top: -30px; */
        margin-top: -30px;
        background: yellow;
        position: relative;
    }
    footer .music .mute1{
        width: 15px;
        height: 15px;
        display:block;
        position: absolute;
        left: 0;
        top: 5px;
        cursor: pointer;

    }
    footer .music .mute{
        width: 15px;
        height: 15px;
        display:block;
        position: absolute;
        left: 0;
        top: 5px;
        display: none;
        cursor: pointer;
    }
    footer .voiceOuter{
        width: 100px;
        height: 100%;
        background: green;
        position: absolute;
        left: 935px;
        top: 0;
    }
    footer .voiceOuter .voiceInner{
        width: 0;
        height: 100%;
        background: blue;
    }
</style>
<body>
    <section id="wrap">
        <video id="myVideo" src="苏打绿 - 微光.mp4" controls width="500px" height="400px"></video>
        <footer>
<!-- 播放暂停 -->
            <div class="play">
                <span id="playPause" class="playPause">▶</span>
                <span class="playPause1" id="playPause1">⏸</span>
                <span class="stop">⏹</span>
            </div>
<!-- 进度条 -->
            <div class="proOuter">
                <div class="proInner"></div>
            </div>
<!-- 时间 -->
            <div class="time">
                <span class="currentTime"></span>
                <span>/</span>
                <span class="allTime"></span>
            </div>
<!-- 是否静音 -->
            <div class="music">
                <span class="mute1">🔊</span>
                <span class="mute">🔕</span>
                
            </div>
<!-- 音量 -->
            <div class="voiceOuter">
                <div class="voiceInner">

                </div>
            </div>
        </footer>
    </section>
</body>
<script>
    var myVideo = document.getElementById('myVideo');
// 时间
    var time = document.querySelector('.time');

     myVideo.onloadeddata = function(){
        // 监听数据加载
        time.children[2].innerHTML = TimeFomat(myVideo.duration);
    }
    myVideo.ontimeupdate = function(){
        // 监听数据更新
        time.children[0].innerHTML = TimeFomat(myVideo.currentTime);

    // 进度条 当前时间currentTime/总时长duration = ProInner的宽度/proOuter的宽度
    var bfb = myVideo.currentTime/myVideo.duration * 100 + '%';
    var proInner = document.querySelector('.proInner');
    proInner.style.width = bfb;
    }

    // 拖动进度条
    var proOuter = document.querySelector('.proOuter');
    proOuter.onmousedown = function(e){
        var x = e.pageX - proOuter.offsetLeft;
        var proOuterWidth = proOuter.offsetWidth;
        var proInner = document.querySelector('.proInner');
        myVideo.currentTime = x / proOuterWidth * myVideo.duration;
        var bfb =  myVideo.currentTime / myVideo.duration * 100 + '%';
        proInner.style.width = bfb;
        this.move = true;
    };
    proOuter.onmousemove = function(e){
        if(this.move){
            var x = e.pageX - proOuter.offsetLeft;
            var proOuterWidth = proOuter.offsetWidth;
            var proInner = document.querySelector('.proInner');
            myVideo.currentTime = x / proOuterWidth * myVideo.duration;
            var bfb =  myVideo.currentTime / myVideo.duration * 100 + '%';
            proInner.style.width = bfb;
        }
        

    };
    proOuter.onmouseup = function(){
        this.move = false;
    };







    function TimeFomat(value){
        var second = parseInt(value);
        var minute = 0;
        var hour = 0;
        if(second>=60){
            minute = parseInt(second / 60);
            second = parseInt(second % 60);
            if(minute>=60){
                hour = parseInt(minute / 60);
                minute = parseInt(minute % 60);
                
            }
        }
        if(second < 10){
            second = '0' + second;
            // console.log(second)
        }
        if(minute < 10){
            minute = '0' + minute;

        }
        var result = minute + ':' + second;
        if(hour > 0){
            result = hour + ':' + result;
        }
        return result;
    }
    

    // 暂停播放按钮
    var playPause = document.getElementById('playPause');
    var playPause1 = document.getElementById('playPause1')
    playPause.onclick = function(){
            myVideo.play();           
            playPause1.style.display='block'
            playPause.style.display='none'

    }
    playPause1.onclick = function(){
            myVideo.pause();
            this.className = 'playPause';           
            playPause.style.display='block'
            playPause1.style.display='none'
            playPause.style.color='#fff'
            playPause.style.cursor='pointer'
    }



    // 停止按钮
    var stop = document.querySelector('.stop');
    stop.onclick = function(){
        myVideo.currentTime = 0;
        myVideo.pause();
        playPause.style.display='block'
        playPause1.style.display='none'
        playPause.className = 'playPause';
    }



    // 是否静音
    var music = document.querySelector('.music')
    var mute1 = document.querySelector('.mute1')
    var mute = document.querySelector('.mute')

    music.onclick=function(){
        if(myVideo.muted){
            myVideo.muted = false;
            mute.style.display='block'
            mute1.style.display='none'

        }
        else{
            myVideo.muted = true;
            mute1.style.display='block'
            mute.style.display='none'
        }
    }


    // 音量条
    var voiceOuter = document.querySelector('.voiceOuter');
    voiceOuter.onclick = function(e){
        var x =e.pageX - this.offsetLeft;
        var bfb = x / this.offseWidth;
        var voiceInner = document.querySelector('.voiceInner');
        voiceInner.style.width = x + 'px';

    }
</script>
</html>